<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品管理</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/goodsmanage.css"/>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/jquery.cookie.js"></script>
</head>
<body>
    <div class="container" id="returnindex">
        <div class="row">
            <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9"></div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" id="returnshop"></div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1" id="ordermanage"></div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"><a href="index.html">返回首页</a></div>
        </div>
    </div>
    <div class="container" id="pagetitle">
        <div class="row">
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
            <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"><p id="titlep"><span>乐享生活</span>&nbsp;商品管理</p></div>
            <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5"></div>
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2">
                <div class="row" id="shopinformation">
                    <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="loadshop"></div>
                </div>
            </div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1"></div>
        </div>
    </div>

    <div class="container" id="managebody">
        <div class="row">
            <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2" id="manageleft">
                <div class="choise" id="update">商品列表</div>
                <div class="unchoise" id="add">上架商品</div>
            </div>
            <div class="col-xs-10 col-sm-10 col-md-10 col-lg-10" id="manageright">
                <p id="tishi">*温馨提示：如因商品信息违规造成商品被封禁，将不可逆转，请谨慎修改。</p>
                <div id="managesearch">名称：<input type="text" id="goodsname">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;类型：<select id="search_type"><option value="水果"></option><option value="水果">水果</option><option value="蔬菜">蔬菜</option></select><button id="shopname_search">查询</button></div>
                <div class="row list">
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 listtitle">名称</div>
                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5 listtitle">描述</div>
                    <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 listtitle">价格</div>
                    <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 listtitle">库存</div>
                    <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 listtitle">类型</div>
                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 listtitle">操作</div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">

        var shopid = location.search.split("=")[1].split("&")[0];

        var page = location.search.split("=")[2];


        var userId = $.cookie("userId");

        $.post("shop/findById",{shopid:shopid},function (data) {

            data = JSON.parse(data);

            var ht = '<img id="shophs" src='+ "/FVOnline/shop/getHS?userId=" + data.userId +'>';
            $("#loadshop").html(ht);

            if (data.userId == userId){

                $("#returnshop").html('<a id="shopdetails">返回店铺</a>');
                $("#ordermanage").html('<a id="gotoordermanage">订单管理</a>');

                $("#shopdetails").click(function () {
                    location.href = "shopdetails.html?shopid=" + shopid + "&page=1";
                });

                $("#gotoordermanage").click(function () {
                    location.href = "ordermanage.html?shopid=" + shopid + "&page=1";
                });
            }
        });


        $.post("goods/getPageGoods",{shopid:shopid,page:page,pageSize:8},function (data) {
            data = JSON.parse(data);
            var ht = ' <p id="tishi">*温馨提示：如因商品信息违规造成商品被封禁，将不可逆转，请谨慎修改。</p>\n' +
                '      <div id="managesearch">类型：<select id="search_type"><option value="未选中"></option><option value="水果">水果</option><option value="蔬菜">蔬菜</option></select>&nbsp;&nbsp;&nbsp;&nbsp;名称：<input type="text" id="goodsname" autocomplete="off"><button id="typename_search">查询</button></div>\n' +
                '                <div class="row list">\n' +
                '                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 listtitle">名称</div>\n' +
                '                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5 listtitle">描述</div>\n' +
                '                    <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 listtitle">价格</div>\n' +
                '                    <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 listtitle">库存</div>\n' +
                '                    <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 listtitle">类型</div>\n' +
                '                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 listtitle">操作</div>\n' +
                '                </div>';
            for (var i = 0; i < data.goods.length; i++) {

                var option1 = data.goods[i].type;
                var option2 = '';

                if (option1 == '水果'){
                    option2 = '蔬菜';
                }else {
                    option2 = '水果';
                }
                ht += ' <div class="row good">\n' +
                    '       <input type="text" class="col-xs-2 col-sm-2 col-md-2 col-lg-2 listgood" id="name_'+ data.goods[i].id +'" value="'+ data.goods[i].goodsname +'">\n' +
                    '       <input type="text" class="col-xs-5 col-sm-5 col-md-5 col-lg-5 listgood" id="details_'+ data.goods[i].id +'" value="'+ data.goods[i].details +'">\n' +
                    '       <input type="text" class="col-xs-1 col-sm-1 col-md-1 col-lg-1 listgood" id="price_'+ data.goods[i].id +'" value="'+ data.goods[i].price +'">\n' +
                    '       <input type="text" class="col-xs-1 col-sm-1 col-md-1 col-lg-1 listgood" id="number_'+ data.goods[i].id +'" value="'+ data.goods[i].number +'">\n' +
                    '       <select class="col-xs-1 col-sm-1 col-md-1 col-lg-1 listgood" id="type_'+ data.goods[i].id +'"><option value="'+ option1 +'">'+ option1 +'</option><option value="'+ option2 +'">'+ option2 +'</option></select>\n' +
                    '       <div type="text" class="col-xs-2 col-sm-2 col-md-2 col-lg-2 listgood" ><a id="upd_'+ data.goods[i].id +'">修改</a>&nbsp;&nbsp;<a id="del_'+ data.goods[i].id +'">删除</a></div>\n' +
                    ' </div>';
            }

            ht += '<div id="rightbottom">共'+ Math.ceil(data.total/8) +'页,当前为第'+ page +'页<button id="prevPage">上一页</button><button id="nextPage">下一页</button>第<input type="text" id="howpage" oninput = "value = value.replace(/[^\\d]/g,\'\')">页<button id="gotoPage">跳转</button></div>';

            $("#manageright").html(ht);

            for (var i = 0; i < data.goods.length; i++) {
                $("#del_" + data.goods[i].id).click(function () {
                    var id = this.id.split("_")[1];
                    $.get("goods/deleteGoods",{id:id},function (data) {
                        data = JSON.parse(data);
                        if (data.code.toLowerCase() == "success"){
                            location.href = "goodsmanage.html?shopid=" + shopid + "&page=" + page;
                        } else {
                            alert("删除失败!");
                        }
                    });
                });


                $("#upd_" + data.goods[i].id).click(function () {

                    var id = this.id.split("_")[1];
                    var name = $("#name_" + id).val();
                    var details = $("#details_" + id).val();
                    var price = $("#price_" + id).val();
                    var number = $("#number_" + id).val();
                    var type = $("#type_" + id).val();

                    $.get("goods/updateGoods",{id:id,name:name,details:details,price:price,number:number,type:type},function (data) {
                        data = JSON.parse(data);
                        if (data.code.toLowerCase() == "success"){
                            location.href = "goodsmanage.html?shopid=" + shopid + "&page=" + page;
                        } else {
                            alert("修改失败!");
                        }
                    });
                });

            }

            if (page != 1){
                $("#prevPage").click(function () {
                    location.href = "goodsmanage.html?shopid=" + shopid + "&page=" + (parseInt(page)-1);
                });
            }

            if (page != Math.ceil(data.total/8)) {
                $("#nextPage").click(function () {
                    location.href = "goodsmanage.html?shopid=" + shopid + "&page=" + (parseInt(page)+1);
                });
            }

            $("#gotoPage").click(function () {

                var pagebuf = $("#howpage").val();

                if (1<= pagebuf && pagebuf <= Math.ceil(data.total/8)){
                    location.href = "goodsmanage.html?shopid=" + shopid + "&page=" + pagebuf;
                }
            });

            $("#typename_search").click(function () {
                if ($("#goodsname").val() != null && $("#goodsname").val().length > 0 && $("#search_type").val() != '未选中'){
                    var goodsname = $("#goodsname").val();
                    var type = $("#search_type").val();
                    page = 1;
                    searchByTypeName(page,type,goodsname);
                }else if ($("#search_type").val() == '未选中' && ($("#goodsname").val() == null || $("#goodsname").val().length == 0)) {
                    location.href = "goodsmanage.html?shopid=" + shopid + "&page=1";
                }
            });
        });


        function searchByTypeName(page,type,goodsname) {
                $.post("goods/getByTypeName",{shopid:shopid,page:page,pageSize:8,type:type,goodsname:goodsname},function (data) {
                    data = JSON.parse(data);

                    var option1 = type;
                    var option2 = '';

                    if (option1 == '水果'){
                        option2 = '蔬菜';
                    }else {
                        option2 = '水果';
                    }


                    var ht = ' <p id="tishi">*温馨提示：如因商品信息违规造成商品被封禁，将不可逆转，请谨慎修改。</p>\n' +
                        '      <div id="managesearch">类型：<select id="search_type"><option value="'+ option1 +'">'+ option1 +'</option><option value="'+ option2 +'">'+ option2 +'</option><option value="未选中"></option></select>&nbsp;&nbsp;&nbsp;&nbsp;名称：<input type="text" id="goodsname" value="'+ goodsname +'" autocomplete="off"><button id="typename_search">查询</button></div>\n' +
                        '                <div class="row list">\n' +
                        '                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 listtitle">名称</div>\n' +
                        '                    <div class="col-xs-5 col-sm-5 col-md-5 col-lg-5 listtitle">描述</div>\n' +
                        '                    <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 listtitle">价格</div>\n' +
                        '                    <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 listtitle">库存</div>\n' +
                        '                    <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1 listtitle">类型</div>\n' +
                        '                    <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2 listtitle">操作</div>\n' +
                        '                </div>';
                    for (var i = 0; i < data.goods.length; i++) {

                        var option1 = data.goods[i].type;
                        var option2 = '';

                        if (option1 == '水果'){
                            option2 = '蔬菜';
                        }else {
                            option2 = '水果';
                        }
                        ht += ' <div class="row good">\n' +
                            '       <input type="text" class="col-xs-2 col-sm-2 col-md-2 col-lg-2 listgood" id="name_'+ data.goods[i].id +'" value="'+ data.goods[i].goodsname +'">\n' +
                            '       <input type="text" class="col-xs-5 col-sm-5 col-md-5 col-lg-5 listgood" id="details_'+ data.goods[i].id +'" value="'+ data.goods[i].details +'">\n' +
                            '       <input type="text" class="col-xs-1 col-sm-1 col-md-1 col-lg-1 listgood" id="price_'+ data.goods[i].id +'" value="'+ data.goods[i].price +'">\n' +
                            '       <input type="text" class="col-xs-1 col-sm-1 col-md-1 col-lg-1 listgood" id="number_'+ data.goods[i].id +'" value="'+ data.goods[i].number +'">\n' +
                            '       <select class="col-xs-1 col-sm-1 col-md-1 col-lg-1 listgood" id="type_'+ data.goods[i].id +'"><option value="'+ option1 +'">'+ option1 +'</option><option value="'+ option2 +'">'+ option2 +'</option></select>\n' +
                            '       <div type="text" class="col-xs-2 col-sm-2 col-md-2 col-lg-2 listgood" ><a id="upd_'+ data.goods[i].id +'">修改</a>&nbsp;&nbsp;<a id="del_'+ data.goods[i].id +'">删除</a></div>\n' +
                            ' </div>';
                    }

                    ht += '<div id="rightbottom">共'+ Math.ceil(data.total/8) +'页,当前为第'+ page +'页<button id="prevPage">上一页</button><button id="nextPage">下一页</button>第<input type="text" id="howpage" oninput = "value = value.replace(/[^\\d]/g,\'\')">页<button id="gotoPage">跳转</button></div>';

                    $("#manageright").html(ht);

                    for (var i = 0; i < data.goods.length; i++) {
                        $("#del_" + data.goods[i].id).click(function () {
                            var id = this.id.split("_")[1];
                            $.get("goods/deleteGoods",{id:id},function (data) {
                                data = JSON.parse(data);
                                if (data.code.toLowerCase() == "success"){
                                    searchByTypeName(parseInt(page),type,goodsname);
                                } else {
                                    alert("删除失败!");
                                }
                            });
                        });


                        $("#upd_" + data.goods[i].id).click(function () {

                            var id = this.id.split("_")[1];
                            var name = $("#name_" + id).val();
                            var details = $("#details_" + id).val();
                            var price = $("#price_" + id).val();
                            var number = $("#number_" + id).val();
                            var type1 = $("#type_" + id).val();

                            $.get("goods/updateGoods",{id:id,name:name,details:details,price:price,number:number,type:type1},function (data) {
                                data = JSON.parse(data);
                                if (data.code.toLowerCase() == "success"){
                                    searchByTypeName(parseInt(page),type,goodsname);
                                } else {
                                    alert("修改失败!");
                                }
                            });
                        });
                    }


                    if (page != 1){
                        $("#prevPage").click(function () {
                            searchByTypeName(parseInt(page)-1,type,goodsname);
                        });
                    }

                    if (page != Math.ceil(data.total/8)) {
                        $("#nextPage").click(function () {
                            searchByTypeName(parseInt(page)+1,type,goodsname);
                        });
                    }

                    $("#gotoPage").click(function () {

                        var pagebuf = $("#howpage").val();

                        if (1<= pagebuf && pagebuf <= Math.ceil(data.total/8)){
                            searchByTypeName(pagebuf,type,goodsname);
                        }
                    });

                    $("#typename_search").click(function () {
                        if ($("#goodsname").val() != null && $("#goodsname").val().length > 0 && $("#search_type").val() != '未选中'){
                            var goodsname = $("#goodsname").val();
                            var type = $("#search_type").val();
                            page = 1;
                            searchByTypeName(page,type,goodsname);
                        }else if ($("#search_type").val() == '未选中' && ($("#goodsname").val() == null || $("#goodsname").val().length == 0)) {
                            location.href = "goodsmanage.html?shopid=" + shopid + "&page=1";
                        }
                    });

                });

        }


        $("#add").click(function () {
            if ($("#add").hasClass("unchoise")){
                $("#add").removeClass("unchoise");
                $("#add").addClass("choise");
                $("#update").removeClass("choise");
                $("#update").addClass("unchoise");

                var ht = '<p id="tishi">*温馨提示：以下内容均为必选项，请谨慎填写。</p>' +
                         '<div id="addform">' +
                            '<p id="formtop">名称：<input type="text" id="name" autocomplete="off"></p>' +
                            '<p>描述：<input type="text" id="details" autocomplete="off"></p>' +
                            '<p>价格：<input type="text" id="price" autocomplete="off" oninput="value=value.replace(/[^\\d{1,}\\.\\d{1,}|\\d{1,}]/g,\'\')"></p>' +
                            '<p>数量：<input type="text" id="number" autocomplete="off" oninput = "value = value.replace(/[^\\d]/g,\'\')"></p>' +
                            '<p>类型：<select id="type"><option value="未选中"></option><option value="水果">水果</option><option value="蔬菜">蔬菜</option></select></p>' +
                            '<p>图片：<input type="file" id="goodsimg" title="" accept="image/png,image/jpeg"></p>' +
                            '<button id="addformcommit">提交审核</button>' +
                         '</div>';
                $("#manageright").html(ht);


                $("#addformcommit").click(function () {
                    if (isNormalInput($("#name"))&&isNormalInput($("#details"))&&isNormalInput($("#price"))&&isNormalInput($("#number"))&& $("#type").val() != '未选中' &&isNormalInput($("#goodsimg")) ){
                        var goodsname = $("#name").val();
                        var details = $("#details").val();
                        var price = $("#price").val();
                        var number = $("#number").val();
                        var type = $("#type").val();
                        var file = $("#goodsimg")[0].files[0];
                        var formData = new FormData();
                        formData.append('goodsname',goodsname);
                        formData.append('details',details);
                        formData.append('shopid',shopid);
                        formData.append('price',price);
                        formData.append('number',number);
                        formData.append('type',type);
                        formData.append('file',file);

                        $.ajax({
                            url: "goods/newGoods",
                            data:formData,
                            type: "POST",
                            dataType: "json",
                            cache: false,			//上传文件无需缓存
                            processData: false,		//用于对data参数进行序列化处理 这里必须false
                            contentType: false,
                            mimeType: "multipart/form-data",
                            success:function(data){
                                if (data.code.toLowerCase() == "success"){
                                    alert("提交审核成功！请耐心等待审核通过！");
                                    $("#name").val("");
                                    $("#details").val("");
                                    $("#price").val("");
                                    $("#number").val("");
                                    $("#type").val("未选中");
                                    $("#goodsimg").val("");
                                }else{
                                    alert("提交审核失败！请稍后再试");
                                }
                            }
                        });

                    }
                });
            }
        });

        $("#update").click(function () {
            if ($("#update").hasClass("unchoise")){
                location.href = "goodsmanage.html?shopid=" + shopid + "&page=1";
            }
        });


        function isNormalInput(ipt){
            return ipt.val() != null && ipt.val().length != 0 && !ipt.hasClass("error_input");
        }





    </script>
</body>
</html>